<template>
  <div class="tree-view-demo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
        <tree-view :treeData="treeData" :showCheckbox="true" :checkStrictly="true" :draggable="true"
                   :showFlag="showFlag" :operateLevel="operateLevel"
                   :treeDefaultExpandedKeys="keysArr" :treeDefaultCheckedKeys="keysArr" @get-children-node="getChildrenNode">
        </tree-view>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入属性</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in treeProps" :key="index">
            <div class="prop-desc">
              <span> {{item.desc}}</span>
              <div class="sub-element-lists" v-if="item.lists && item.lists.length !== 0">
                <ul class="sub-lists">
                  <li class="sub-item" v-for="(op,i) in item.lists" :key="i">
                    <label class="sub-prop-name">{{op.name}}：</label>
                    <span class="sub-prop-value">{{op.desc}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
        <label class="prop-title">输出方法</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in treeMethods" :key="index">
            <div class="prop-desc">
              <span> {{item.desc}}</span>
              <div class="sub-element-lists" v-if="item.lists && item.lists.length !== 0">
                <ul class="sub-lists">
                  <li class="sub-item" v-for="(op,i) in item.lists" :key="i">
                    <label class="sub-prop-name">{{op.name}}：</label>
                    <span class="sub-prop-value">{{op.desc}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  // import TreeView from '../../components/el-extend-components/TreeView/TreeView'
  export default {
    name: 'TreeViewDemo',
    // components:{TreeView},
    data() {
      return {
        urls:{
          treeDataUrl: remoteUrl + '/demo/test/tree'
        },
        treeData: [],
        showFlag: {
          isAddShow: true,
          isEditShow: true,
          isDeleteShow: true,
        },
        operateLevel: {
          add: [1],
          edit: [2,3],
          delete: [2]
        },
        keysArr: ['3-2', '3-2-1'],
        // tree组件配置
        treeProps: [
          {
            lists: [
              {name: 'treeData', desc: 'Array，tree数据'},
              {name: 'nodeKey', desc: 'String，每个树节点用来作为唯一标识的属性，整棵树应该是唯一的,默认是根据id'},
              {name: 'isIcon', desc: 'Boolean，是否显示图标,默认是false'},
              {name: 'operateLevel', desc: 'Object，决定哪一级分别显示哪些操作，配合showFlag使用'},
              {name: 'showFlag', desc: 'Object，决定显示哪些操作，现在有添加、编辑、删除操作'},
              {name: 'emptyText', desc: 'String，数据为空时显示的文本，默认是数据为空'},
              {name: 'renderAfterExpand', desc: 'Boolean，是否在第一次展开某个树节点后才渲染其子节点，默认是true'},
              {name: 'highlightCurrent', desc: 'Boolean，是否高亮当前选中节点，默认值是 false'},
              {name: 'defaultExpandAll', desc: 'Boolean，是否默认展开所有节点，默认值是 false'},
              {
                name: 'expandOnClickNode',
                desc: 'Boolean，是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点'
              },
              {name: 'checkOnClickNode', desc: 'Boolean，是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点'},
              {name: 'autoExpandParent', desc: 'Boolean，展开子节点的时候是否自动展开父节点，默认值为 true'},
              {name: 'treeDefaultExpandedKeys', desc: 'Array，默认展开的节点的 key 的数组'},
              {name: 'showCheckbox', desc: 'Boolean，节点是否可被选择,默认false不显示'},
              {name: 'checkStrictly', desc: 'Boolean，在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，false:是严格遵守，true:不遵守'},
              {name: 'treeDefaultCheckedKeys', desc: 'Array，默认勾选的节点的 key 的数组'},
              {name: 'accordion', desc: 'Boolean，是否每次只打开一个同级树节点展开，默认值是 false'},
              {name: 'indent', desc: 'Number，相邻级节点间的水平缩进，单位为像素，默认是16像素'},
              {name: 'lazy', desc: 'Boolean，是否懒加载子节点，需与 load 方法结合使用，默认是false'},
              {name: 'draggable', desc: 'Boolean，是否开启拖拽节点功能，默认是false'},
            ]
          }
        ],
        treeMethods: [
          {
            lists: [
              {name: 'on-add', desc: '参数node当前节点内容，添加节点时触发'},
              {name: 'on-edit', desc: '参数node当前节点内容，编辑节点时触发'},
              {name: 'on-delete', desc: '参数node当前节点内容，删除节点时触发'},
              {name: 'on-handle-click', desc: '参数data、node、self，传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身，节点被点击时的回调,返回本节点信息'},
              {
                name: 'on-check-change',
                desc: '参数data:本节点信息，isChecked:本节点选择状态，isNodeCheck:子节点是否有选中节点，checkedNodes:已选中的节点数组。节点选中状态发生变化时的回调 '
              },
              {
                name: 'on-mouse-right-click',
                desc: '参数mouseEvt:右键的位置信息，data：本节点的信息，node：也可以取到本节点信息，比data全些，checkedNodes:已选中的节点数组。当某一节点被鼠标右键点击时会触发该事件 '
              },
              {name: 'on-check-click', desc: '参数data、node，传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象。当复选框被点击的时候触发 '},
              {
                name: 'on-node-drop',
                desc: '共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event。拖拽成功完成时触发的事件 '
              },
            ]
          }
        ],
      }
    },
    methods: {
      getTreeData(){
        this.httpRequest('get',this.urls.treeDataUrl,{},{
          hideSuccessTip: true,
          ignoreEmptyData: true,
          fullSuccess: true,
        }).then(res => {
          res.value && res.value.children && (this.treeData = res.value.children);
        });
      },
      //树组件懒加载方法
      getChildrenNode(nodeId,resolve){
        //  这里可以替换成向后台发起的请求修改data,为了演示我用的是写死的数据,获取到data后,resolve出去就好了
        let childrenData = [{
          label: '二级 1-1',
          id: '1-1',
          expanded: false,
          selectable: true,
          selected: false
        }];
        resolve(childrenData);
      }
    },
    mounted() {
      this.getTreeData();
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../../assets/styles/base_style";
  .tree-view-demo-wrapper{
    width: 100%;
    height: 100%;
  }
</style>
